<template>
    <!-- 第二个el-card的折线图 -->
    <!-- 第二步 准备容器 -->
    <div class="lineChart" ref="chart"></div>
</template>

<script>
// 引入 echarts   第一步
import * as echarts from 'echarts'
export default {
    name: "LineChart",
    mounted() {
        // 组件挂载完毕后初始化echarts实例
        let myEcharts = echarts.init(this.$refs.chart)
        // 配置数据
        myEcharts.setOption({
            xAxis:{
                // 隐藏X轴
                show:false,
                // 均分
                type:'category'
            },
            yAxis:{
                // 隐藏Y轴
                show:false
            },
            // 系列
            series:[
                {
                    type:'line',
                    data:[10,20,40,30,50,15,40,30,20,10,50,20],
                    // 不显示拐点
                    itemStyle:{
                        opacity:0
                    },
                    // 线条的样式
                    lineStyle:{
                        color:'purple',
                    },
                    // 阴影填充样式
                    areaStyle:{
                        color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'purple' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#fff' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    // 线条呈平滑曲线
                    smooth:true
                }
            ],
            // 调试布局
            grid:{
                left:-20,
                right:-20,
                top:1,
                bottom:0
            }
        })
    }
}
</script>

<style scoped>
.lineChart {
    width: 100%;
    height: 100%;
}
</style>
